<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../css/common.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css">
		<link rel="stylesheet" type="text/css" href="../css/icomoon/style.css">
		<script type="text/javascript" src="../js/rem.js"></script>
	</head>

	<body>
		<div class="m-loan">
			<h3 class="header f-pr">
				<span>我要借款</span>
				<i class="icon-angle-left f-pa"></i>
				<i class="loan-icon-1 f-pa"></i>
			</h3>
			<p class="tips">以下信息均为必填</p>
			<ul class="list">
				<li>
					<i><img src="../images/loan-icon-2.png"></i>
					<span>真实姓名</span>
					<input type="text" id="name" placeholder="请输入您的真实姓名">
				</li>
				<li>
					<i><img src="../images/loan-icon-3.png"></i>
					<span>手机号码</span>
					<input type="text" id="mobile" placeholder="请输入您的手机号码">
				</li>
				<li>
					<i><img src="../images/loan-icon-4.png"></i>
					<span>验证码</span>
					<input type="text" class="code" id="code" placeholder="请输入验证码">
					<button class="code-text f-pa" id="getcode">获取验证码</button>
				</li>
			</ul>
			<ul class="list list-1">
				<li>
					<i><img src="../images/loan-icon-5.png"></i>
					<span>借款金额</span>
					<input type="text" id="amount" value="10" placeholder="请输入借款金额">
					<small class="f-pa">万元</small>
				</li>
				<li>
					<i><img src="../images/loan-icon-6.png"></i>
					<span>借款期限</span>
					<input type="text" id="date" placeholder="请输入借款期限">
				</li>
				<!--<li>
					<i><img src="../images/loan-icon-7.png"></i>
					<span>借款城市</span>
					<input type="text" placeholder="请输入借款城市">
				</li>-->
				<li>
					<i><img src="../images/loan-icon-8.png"></i>
					<span>借款用途</span>
					<input type="text" id="type" placeholder="请输入借款用途">
				</li>
			</ul>
			<div class="btn-box">
				<a class="btn" id="sub">提交申请</a>
			</div>
			<p class="agree">
				<i class="loan-icon-9 check f-fl"></i>
				<span>我已阅读并同意<a class="service">《无忧微贷服务协议》</a></span>
			</p>
		</div>

		<script type="text/javascript" src="../js/zepto.min.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/mui.picker.min.js"></script>
		<script type="text/javascript" src="../js/mui.poppicker.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>

		<script type="text/javascript">
			$(function() {
				var array = [{
					value: '1',
					text: '1个月内'
				}, {
					value: '2',
					text: '6个月内'
				}, {
					value: '3',
					text: '1年内'
				}, {
					value: '4',
					text: '1年以上'
				}];
				var picker = new mui.PopPicker();
				picker.setData(array);
				$('#date').val(array[0].text)
					.attr('data-id', array[0].value).bind('tap', function() {
						picker.show(function(item) {
							$('#date').val(item[0].text).attr('data-id', item[0].value);
						});
					});

				var credit_type = [{
					value: '3',
					text: '车辆抵押贷'
				}, {
					value: '8',
					text: '房产周转贷'
				}, {
					value: '9',
					text: '房产抵押贷'
				}, {
					value: '11',
					text: '买卖赎楼贷'
				}, {
					value: '12',
					text: '房产信用贷'
				}];
				var picker_1 = new mui.PopPicker();
				picker_1.setData(credit_type);
				$('#type').val(credit_type[0].text)
					.attr('data-id', credit_type[0].value)
					.bind('tap', function() {
						picker_1.show(function(item) {
							$('#type').val(item[0].text).attr('data-id', item[0].value);
						});
					});
			 	
			 	$('.agree .loan-icon-9').on('tap', function(){
			 		$(this).toggleClass('check');
			 	});
			});

			var page = {
				back: function() {
					$('.icon-angle-left').on('tap', function() {
						mui.back();
					});
				},
				loaninfo: function() {
					$('.loan-icon-1').on('tap', function() {
						mui.openWindow({
							url: 'discovery/loaninfo.html'
						});
					});
				},
				mobilecode: function() {
					$('#getcode').on('tap', function() {
						var mobile = $('#mobile').val();
						if(mobile == '') {
							mui.toast('请输入正确的手机号码');
							return false;
						}
						$.ajax({
							url: base + 'finance/loancode',
							type: 'post',
							data: {
								'mobile': $.trim($('#mobile').val())
							},
							dataType: 'json',
							success: function(data) {
								if(data.result) {
									countdowncode(data.wait_second);
								} else {
									mui.toast(data.message);
								}
							},
							error: function(data) {
								console.error(data.message);
							}
						});
					});
				},
				service: function() {
					$('.service').on('tap', function() {
						mui.openWindow({
							url: 'service.html',
							show: {
								aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
							}
						});
					});
				}
			};

			function countdowncode(wait) {
				var $obj = $('#getcode');
				if(wait === 0) {
					$obj.text('获取验证码').removeClass('disable').attr('disable', false);
				} else {
					$obj.text(wait + '秒后重发').addClass('disable').attr('disable', true);
					wait--;
					setTimeout(function() {
						countdowncode(wait);
					}, 1000);
				}
			}

			function subinfo() {
				var name = $('#name').val();
				if(name == '') {
					mui.toast('请输入您的真实姓名');
					return false;
				}
				var mobile = $('#mobile').val();
				if(mobile == '') {
					mui.toast('请输入正确的手机号码');
					return false;
				}
				var amount = $('#amount').val();
				if(amount == '') {
					mui.toast('请输入借款金额');
					return false;
				}
				var code = $('#code').val();
				if(code == '') {
					mui.toast('请输入验证码');
					return false;
				}
				var check = $('.loan-icon-9').hasClass('check');
				if(!check){
					mui.toast('请勾选我已阅读并同意《无忧微贷服务协议》');
					return false;
				}
				var data = {
					'name': name,
					'phone': mobile,
					'amount': amount,
					'code': code,
					'dead_line': $('#date').attr('data-id'),
					'remark': 'app提交',
					'credit_type': $('#type').attr('data-id')
				};
				console.log('申请借款提交数据：' + JSON.stringify(data));
				mui.ajax(base + 'finance/loan', {
					type: 'post',
					data: data,
					dataType: 'json',
					success: function(data) {
						console.log('申请借款返回数据：' + JSON.stringify(data));
						mui.toast(data.message);
						if(data.result) {
							setTimeout(function() {
								plus.webview.currentWebview().close();
							}, 1500);
						}
					},
					error: function(data) {
						console.error(data.message);
					}
				});
			}

			//页面初始化
			document.addEventListener("plusready", function() {
				page.back();
				page.loaninfo();
				page.mobilecode();
				page.service();
				$('#sub').bind('tap', function() {
					return subinfo();
				});
			}, false);
		</script>
	</body>

</html>